<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :row-key="(record) => record.id"
      :pagination="false"
    >
      <template #action="{ record }">
      <span>
        <a @click="toDetails(record)">查看详细</a>
        <a>报名</a>
      </span>
    </template>
    </a-table>
    <a-pagination v-model:current="current" :total="total" show-less-items />
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { $Http } from "@utils/request.js";
import { list } from "@apis/exam.js";
import { watchEffect } from "@vue/runtime-core";

export default {
  setup() {
    const state = reactive({
      columns: [
        {
          //表单标题
          title: "考试时间",
          key: "emtm",
          dataIndex: "emtm",
        },
        {
          title: "主办单位",
          key: "ogze",
          dataIndex: "ogze",
        },
        {
          title: "考试名称",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "考试期数",
          key: "podl",
          dataIndex: "podl",
        },
        {
          title: "证书名称",
          key: "ccnm",
          dataIndex: "ccnm",
        },
        {
          title: "考试费",
          key: "cost",
          dataIndex: "cost",
        },
        {
          title: "报名开始",
          key: "star",
          dataIndex: "star",
        },
        {
          title: "报名截止",
          key: "ddle",
          dataIndex: "ddle",
        },
        {
          title: "准考证时间",
          key: "attm",
          dataIndex: "attm",
        },
        {
          title: "报名上限",
          key: "tplt",
          dataIndex: "tplt",
        },
        {
          title: "成绩时间",
          key: "gdtm",
          dataIndex: "gdtm",
        },
      ],
      tableData: [],
      current: 1,
      total: 0,
      size: 10,
    });

    // 考试列表接口
    const API_list = (current, size) => {
      return $Http.request({
        url: list,
        method: "POST",
        data: {
          page: {
            size,
            current,
          },
        },
      });
    };

    // 监听分页切换
    watchEffect(async () => {
      let res = await API_list(state.current, state.size);
      let { records, current, total, size } = res.data.data;
      state.tableData = records;
      state.current = current;
      state.total = total;
      state.size = size;
    });

    // 去详情页
    const toDetails = (row)=>{
      console.log(row)
    }

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>